doctype html
//
 *  Copyright (c) 2014 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.

html
head
  meta(charset="utf-8")
  meta(name="description", content="WebRTC reference app")
  meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1")
  meta(itemprop="description", content="Video chat using the reference WebRTC application")
  meta(itemprop="image", content="/images/webrtc-icon-192x192.png")
  meta(itemprop="name", content="AppRTC")
  meta(name="mobile-web-app-capable", content="yes")
  meta(id="theme-color", name="theme-color", content="#ffffff")

  base(target="_blank")

  title AppRTC

  link(rel="manifest", href="manifest.json")
  link(rel="icon", sizes="192x192", href="/images/webrtc-icon-192x192.png")
  if !chromeapp
    link(rel="canonical", href=room_link)
  link(rel="stylesheet", href="/css/main.css")
  
body
  //
     * Keep the HTML id attributes in sync with |UI_CONSTANTS| defined in
     * appcontroller.js.
  #videos
    video#mini-video(autoplay, muted)
    video#remote-video(autoplay)
    video#local-video(autoplay, muted)

  #room-selection.hidden
    h1 AppRTC
    p#instructions Please enter a room name.
    div
      #room-id-input-div
        input#room-id-input(type='text', autofocus='')
        label#room-id-input-label.error-label.hidden(for='room-id-input') Room name must be 5 or more characters and include only letters and numbers.
      #room-id-input-buttons
        button#join-button JOIN
        button#random-button RANDOM
    #recent-rooms
      p Recently used rooms:
      ul#recent-rooms-list


  #confirm-join-div.hidden
    div Ready to join
      span#confirm-join-room-span
      | ?
    button#confirm-join-button JOIN

  footer
    #sharing-div
      #room-link Waiting for someone to join this room:
        a#room-link-href(href=room_link, target='_blank')= room_link
    #info-div
    #status-div
    #rejoin-div.hidden
      span You have left the call.
      button#rejoin-button REJOIN
      button#new-room-button NEW ROOM


  #icons.hidden
    svg#mute-audio(xmlns='http://www.w3.org/2000/svg', width='48', height='48', viewbox='-10 -10 68 68')
      title title
      circle(cx='24', cy='24', r='34')
      title Mute audio
      path.on(transform='scale(0.6), translate(17,18)', d='M38 22h-3.4c0 1.49-.31 2.87-.87 4.1l2.46 2.46C37.33 26.61 38 24.38 38 22zm-8.03.33c0-.11.03-.22.03-.33V10c0-3.32-2.69-6-6-6s-6 2.68-6 6v.37l11.97 11.96zM8.55 6L6 8.55l12.02 12.02v1.44c0 3.31 2.67 6 5.98 6 .45 0 .88-.06 1.3-.15l3.32 3.32c-1.43.66-3 1.03-4.62 1.03-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c1.81-.27 3.53-.9 5.08-1.81L39.45 42 42 39.46 8.55 6z', fill='white')
      path.off(transform='scale(0.6), translate(17,18)', d='M24 28c3.31 0 5.98-2.69 5.98-6L30 10c0-3.32-2.68-6-6-6-3.31 0-6 2.68-6 6v12c0 3.31 2.69 6 6 6zm10.6-6c0 6-5.07 10.2-10.6 10.2-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c6.56-.97 12-6.61 12-13.44h-3.4z', fill='white')
    svg#mute-video(xmlns='http://www.w3.org/2000/svg', width='48', height='48', viewbox='-10 -10 68 68')
      circle(cx='24', cy='24', r='34')
      title Mute video
      path.on(transform='scale(0.6), translate(17,16)', d='M40 8H15.64l8 8H28v4.36l1.13 1.13L36 16v12.36l7.97 7.97L44 36V12c0-2.21-1.79-4-4-4zM4.55 2L2 4.55l4.01 4.01C4.81 9.24 4 10.52 4 12v24c0 2.21 1.79 4 4 4h29.45l4 4L44 41.46 4.55 2zM12 16h1.45L28 30.55V32H12V16z', fill='white')
      path.off(transform='scale(0.6), translate(17,16)', d='M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-4 24l-8-6.4V32H12V16h16v6.4l8-6.4v16z', fill='white')
    svg#fullscreen(xmlns='http://www.w3.org/2000/svg', width='48', height='48', viewbox='-10 -10 68 68')
      circle(cx='24', cy='24', r='34')
      title Enter fullscreen
      path.on(transform='scale(0.8), translate(7,6)', d='M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z', fill='white')
      path.off(transform='scale(0.8), translate(7,6)', d='M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z', fill='white')
    svg#hangup.hidden(xmlns='http://www.w3.org/2000/svg', width='48', height='48', viewbox='-10 -10 68 68')
      circle(cx='24', cy='24', r='34')
      title Hangup
      path(transform='scale(0.7), translate(11,10)', d='M24 18c-3.21 0-6.3.5-9.2 1.44v6.21c0 .79-.46 1.47-1.12 1.8-1.95.98-3.74 2.23-5.33 3.7-.36.35-.85.57-1.4.57-.55 0-1.05-.22-1.41-.59L.59 26.18c-.37-.37-.59-.87-.59-1.42 0-.55.22-1.05.59-1.42C6.68 17.55 14.93 14 24 14s17.32 3.55 23.41 9.34c.37.36.59.87.59 1.42 0 .55-.22 1.05-.59 1.41l-4.95 4.95c-.36.36-.86.59-1.41.59-.54 0-1.04-.22-1.4-.57-1.59-1.47-3.38-2.72-5.33-3.7-.66-.33-1.12-1.01-1.12-1.8v-6.21C30.3 18.5 27.21 18 24 18z', fill='white')


  if !chromeapp
    != include_loopback_js


  script(src='/js/apprtc.debug.js')

  if chromeapp
    script(src='/js/appwindow.js')


  if !chromeapp
    script(type="text/javascript").
      var loadingParams = {
        errorMessages: '!{error_messages}',
        isLoopback: #{is_loopback},
        mediaConstraints: !{media_constraints},
        offerConstraints: !{offer_constraints},
        peerConnectionConfig: !{pc_config},
        peerConnectionConstraints: !{pc_constraints},
        turnRequestUrl: '!{turn_url}',
        turnTransports: '!{turn_transports}',
        wssUrl: '!{wss_url}',
        wssPostUrl: '!{wss_post_url}',
        bypassJoinConfirmation: #{bypass_join_confirmation},
        versionInfo: '!{version_info}'
      };

      var roomId = '!{room_id}';
      if (roomId.length > 0) {
        loadingParams.roomId = '!{room_id}';
        loadingParams.roomLink = '!{room_link}';
      }

      var appController;

      function initialize() {
        // We don't want to continue if this is triggered from Chrome prerendering,
        // since it will register the user to GAE without cleaning it up, causing
        // the real navigation to get a "full room" error. Instead we'll initialize
        // once the visibility state changes to non-prerender.
        if (document.webkitVisibilityState === 'prerender') {
          document.addEventListener('webkitvisibilitychange', onVisibilityChange);
          return;
        }
        appController = new AppController(loadingParams);
      }

      function onVisibilityChange() {
        if (document.webkitVisibilityState === 'prerender') {
          return;
        }
        document.removeEventListener('webkitvisibilitychange', onVisibilityChange);
        initialize();
      }

      initialize();
